// 引入webpack
const webpack = require('webpack')
// 引入html生成插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入css压缩插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
	// 入口文件，指向app.js
	entry: {
		index: './src/js/index.js',
	},
	// 出口文件
	output: {
		// 项目的路径
		path: __dirname + '/dist',
		// 增加随机数防止缓存
		//filename: 'js/[name].[hash:5].js',
		// 输出的文件的路径
		filename: 'js/[name].js',
		// 为使用热启动后产生的日志文件设定输入路径
		hotUpdateChunkFilename: 'hot/hot-update.js',
		hotUpdateMainFilename: 'hot/hot-update.json'
	},
    externals:[
		// 让webpack可以加载外部http资源 例如螳螂
        require('webpack-require-http')
    ],
	// webpack-dev-server 环境
	devServer: {
		contentBase: './dist',
		hot: true
	},
	module: {
		// loader放在rules这个数组里面
		rules: [
			{
				//把es6转换成es5
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'babel-loader'
			},
			{
				test: /\.html$/,
				use: {
					loader: 'html-loader'
				}
			},
			{
				//识别图片
				test: /\.(png|jpg|gif)$/,
				loader: 'url-loader',
				options: {
                    limit: 4096,
                    name: 'image/[name].[ext]'
                }
			},
			{	
				//压缩css
				test: /\.css$/,
				use: ExtractTextPlugin.extract({
					fallback: "style-loader",
					publicPath: "../",
					use: [
						{
							loader: 'css-loader',
							options:{
								minimize: true //css压缩
							}
						}
					]
				})
			},
			{
				//识别字体文件
				test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
				loader: 'file-loader?name=./fonts/[name].[ext]'
			},
		]
	},
	// 将插件添加到webpack中
	plugins: [
		// 开启多页应用 生成html文件
		new HtmlWebpackPlugin({
			//模板文件是哪个
			template: './src/index.html',
			//选择注入哪个文件
			chunks: ['index'],
			//是否添加hash随机数防止缓存
			//hash: true,
			//开启html压缩
			minify:{
				removeComments:true, //移除HTML中的注释
				collapseWhitespace:true//压缩为一行
			},
			// manual根据chunks的位置手动排序
			chunksSortMode: "manual"
		}),
		// 防止webpack一直弹出警告 加载HMR需要的两个插件 
		new webpack.NamedModulesPlugin(),
		new webpack.HotModuleReplacementPlugin(),
		// 解决加载jquery后 jquery不能获得$符控制权的问题
		new webpack.ProvidePlugin({
			$: "jquery",
			jQuery: "jquery"
		}),
		// 使用 ParallelUglifyPlugin 并行压缩输出JS代码
		// 编译之前需要把es6 转成es5 
		// 另外，在常规开发最后阶段之前 不建议开启代码压缩 否则会令打包效率下降60%
		// new ParallelUglifyPlugin({
		// 	uglifyJS: {
		// 		output: {
		// 			//是否保留空格和制表符
		// 			beautify: false,
		// 			//是否保留注释
		// 			comments: false
		// 		},
		// 		compress: {
		// 			//删除警告
		// 			warnings: false,
		// 			//删除console.log
		// 			drop_console: true,
		// 		}
		// 	}
		// }),
		new ExtractTextPlugin("css/styles.css"),
	]
}
